<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件总线bus</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="box">
        <weixinauthor></weixinauthor>
        <br>
        <hr>

        <weixinuser></weixinuser>

    </div>

    <script>
        var bus = new Vue(); //事件总线-空vue实例

        Vue.component("weixinauthor", {
            template: `<div>
                我是微信公众号作者<br>
                <input type="text" ref="mytext">
                <button @click="handleSend()">发布</button>
                </div>`,
            methods: {
                handleSend() {
                    bus.$emit("weixinmessage", this.$refs.mytext.value)
                }
            }
        })

        Vue.component("weixinuser", {
            //要看到消息首先需要在合适的位置”订阅“ bus.$on
            template: `<div>
                我是一个微信用户
                </div>`,
            //合适的位置
            mounted() {
                bus.$on("weixinmessage", (data) => {
                    console.log("收到消息推送了", data);
                })
            }
        })

        new Vue({
            el: "#box",
            data: {

            }
        })
    </script>

</body>

</html>